<!DOCTYPE html>
<html>

<head>
    <title>three.js webgl - loaders - OBJ loader</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <style>
        body {
            font-family: Monospace;
            background-color: #000;
            color: #fff;
            margin: 0px;
            overflow: hidden;
        }
    </style>
</head>

<body>
    

    <script src="js/three.js"></script>
    <script src="js/OrbitControls.js"></script>
    <script src="js/stats.min.js"></script>
    <script src="js/TweenMax.min.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/papaparse.min.js"></script>
    <script>
        var container;

        var camera, scene, renderer;

        var mouseX = 0,
            mouseY = 0;

        var windowHalfX = window.innerWidth / 2;
        var windowHalfY = window.innerHeight / 2;

        var object, lunzi;

        var directionalLight;
        var itemCount=3000;

        init();
        animate();


        function init() {
            container = document.createElement('div');
            document.body.appendChild(container);
            camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, .01, 10000);
            camera.position.set(20,20,14)

            // scene
            scene = new THREE.Scene();
            //雾化
            scene.fog = new THREE.Fog(0x661166,0.0015,400)  
            //scene.fog = new THREE.Fog(0x001122,0.0015,200)  
            //scene.fog = new THREE.FogExp2(0x000000,0.0025)
            stats = new Stats();
            document.body.appendChild(stats.dom);

            scene.add(camera);
            //辅助
            var axesHelper = new THREE.AxesHelper(25);
            scene.add(axesHelper)

            renderer = new THREE.WebGLRenderer({
                antialias: true,
                alpha: true
            });

            // renderer.shadowMap.enabled = true;
            // renderer.shadowMap.type = THREE.PCFSoftShadowMap;

            renderer.setPixelRatio(window.devicePixelRatio);
            renderer.setSize(window.innerWidth, window.innerHeight);
            container.appendChild(renderer.domElement);
            controls = new THREE.OrbitControls(camera, renderer.domElement);

            window.addEventListener('resize', onWindowResize, false);


            addPanel()
            addLight()
            // addPoints()
            createItems(itemCount)
        }

        //灯光
        function addLight() {
            //环境光
            var ambientLight = new THREE.AmbientLight(0x333333);
            scene.add(ambientLight);

            var spotLight = new THREE.SpotLight(0xffffff);
            spotLight.position.set(40, 60, -10);
            spotLight.castShadow = true;
            scene.add(spotLight);

            var spotLight1 = new THREE.SpotLight(0xffffff);
            spotLight1.position.set(0, 0, -100);
            scene.add(spotLight1);

            var spotLight2 = new THREE.SpotLight(0x5588cc);
            spotLight2.position.set(-30, 10, -30);
            scene.add(spotLight2);

            var spotLightHelper1 = new THREE.SpotLightHelper( spotLight1 );
            scene.add( spotLightHelper1 );
            var spotLightHelper = new THREE.SpotLightHelper( spotLight );
            scene.add( spotLightHelper );
            // //平行光
            directionalLight = new THREE.DirectionalLight(0xff5808);
            directionalLight.position.set(-10, 100, 9)
            // directionalLight.position.set(-40, 60, -10);
        


            scene.add(directionalLight);

            // var helper = new THREE.CameraHelper(directionalLight.shadow.camera);
            // scene.add(helper);
        }


        //底图
        function addPanel() {
            var geometry = new THREE.PlaneGeometry(50, 50);
            var material = new THREE.MeshLambertMaterial({
                color: 0x334466,
                //transparent: true,
                //map:new THREE.TextureLoader().load('./img/wuhan.png')
                //opacity:.3,
            });
            cubeGroup = new THREE.Mesh(geometry, material);
            cubeGroup.rotation.x = Math.PI / 180 * -90
            cubeGroup.rotation.z = Math.PI / 180 * 60
           // cubeGroup.position.y = -1
            //cubeGroup.receiveShadow = true;
            scene.add(cubeGroup)

        }

        var group;
        function loadData() {
           
            let data = [];
            for(i=0;i<itemCount;i++){
                data.push([110+Math.random()*10,30+Math.random()*10,Math.random()*10000])
            }
                 
            itemsTransfrom(data)
        }

        //创建一个光柱
        function createItem(){
            let w = 0.1  //柱子粗细
            let h = 0.0002  //默认高度
            let x = 0
            let y = 0
           let geometry = new THREE.BoxBufferGeometry(w, h, w);
            //let geometry = new THREE.BoxGeometry(w, h, w);
          //  let geometry =new THREE.CylinderGeometry( w, w, h, 6 );
            
            // 柱子基础颜色
            var material = new THREE.MeshStandardMaterial({
                color: 0x338888,
                blending: THREE.AdditiveBlending,
                transparent: true,
              //  depthTest: false,
                opacity: .6,
            });
            //柱子光柱1
            var material1 = new THREE.MeshStandardMaterial({
                color: 0x3399ff,
               // wireframe:true,
                blending: THREE.AdditiveBlending,
                transparent: true,
                opacity: 0.6,
            });

            //柱子光柱2
            var material2 = new THREE.MeshStandardMaterial({
                color: 0x3366ff,
               // wireframe:true,
                blending: THREE.AdditiveBlending,
                transparent: true,
                opacity: .8,
            });

            let m = new THREE.Mesh(geometry, material);
            let mline = new THREE.Mesh(geometry, material1);
            let mline1 = new THREE.Mesh(geometry, material2);
            mline.scale.set(1,Math.random()*2,1)
            mline1.scale.set(1,Math.random()*1.5,1)

            m.position.set(x, h/2+0.001, y)
            m.add(mline)
            m.add(mline1)
            //光柱上下随机动画
           // if(Math.random()>.3)
                TweenMax.to(mline.position,Math.random()*5,{y:Math.random()*h,repeat:-1,yoyo:true})
          //  if(Math.random()>.6)
                TweenMax.to(mline1.position,Math.random()*5,{y:Math.random()*h,repeat:-1,yoyo:true})
            group.add(m)
           
        }

        //创建指定数量光柱
        function createItems(count){
            group = group || new THREE.Group()
            for(let i=0;i<count;i++){
                createItem()
            }   
            scene.add(group)
            group.position.set(6,0,85)
        }

        //光柱更加传入数据进行转换
        function itemsTransfrom(items){
            let mesh=null
            items.map((item,i)=>{
                //if(i>1000)return
                mesh = group.children[i]
                if(mesh){
                    //设置高度
                    TweenMax.to(mesh.scale,2,{y:item[2]})
                    //设置位置
                    TweenMax.to(mesh.position,2,{x:(item[0]-115)*10,z:(item[1]-39)*10})
                    //颜色
                    mesh.material.color.set(getColorByValue(item[2]))
                }
               

            })
            
        }

        function getColorByValue(value){
            let colors=[0xff00ff,0x44aacc,0x8899dd,0x99ddff,0xffffff]
            let color=0x338888
           if(value<3000)
                color=colors[0]
            else if(value<20000)
                color=colors[1]
            else if(value<40000)
                color=colors[2]
            else if(value<60000)
                color=colors[3]
            else
                color=colors[4]
            return color;
        }
       
        document.addEventListener('click',()=>{
            loadData()
        })









        function onWindowResize() {

            windowHalfX = window.innerWidth / 2;
            windowHalfY = window.innerHeight / 2;

            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();

            renderer.setSize(window.innerWidth, window.innerHeight);

        }

        
        function animate() {
            requestAnimationFrame(animate);
            render();
        }

        function render() {
            stats.update();
            controls.update();
            renderer.render(scene, camera);
        }
    </script>

</body>

</html>